<template>
  <div class="canteen-shop-page">
    <p style="line-height: 12px; text-align: left; font-size: 20px; font-weight: bold;">
      理工食堂店铺
    </p>
    <p style="line-height: 12px; text-align: left; font-size: 15px; font-weight: bold;">
      点击某行可以跳转到详情
    </p>
    <!-- 查询参数表单 -->
    <el-form ref="queryForm" :model="queryForm" class="query-form" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="店铺名称">
            <el-input v-model="queryForm.shopName" placeholder="请输入店铺名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="食堂位置">
            <el-select v-model="queryForm.shopAt" placeholder="请选择食堂位置">
              <el-option label="一食堂" value="一食堂"></el-option>
              <el-option label="二食堂" value="二食堂"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="店铺楼层">
            <el-select v-model="queryForm.shopFloor" placeholder="请选择店铺楼层">
              <el-option label="一楼" value="一楼"></el-option>
              <el-option label="二楼" value="二楼"></el-option>
              <el-option label="三楼" value="三楼"></el-option>
              <el-option label="四楼" value="四楼"></el-option>
              <el-option label="五楼" value="五楼"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="支付方式">
            <el-checkbox-group v-model="Payment">
              <el-checkbox value="校园卡">校园卡</el-checkbox>
              <el-checkbox value="微信支付">微信支付</el-checkbox>
              <el-checkbox value="云闪付">云闪付</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="排序字段">
            <el-select v-model="queryForm.order" placeholder="请选择排序字段">
              <el-option label="创建时间升序" value="1"></el-option>
              <el-option label="创建时间降序" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 查询结果表格 -->
    <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        @row-click="handleRowClick"
    >
      <el-table-column label="店铺名称" prop="shopName" show-overflow-tooltip></el-table-column>
      <el-table-column label="食堂位置" prop="shopAt" show-overflow-tooltip></el-table-column>
      <el-table-column label="店铺楼层" prop="shopFloor" show-overflow-tooltip></el-table-column>
      <el-table-column label="相对位置" prop="shopRelativePosition" show-overflow-tooltip></el-table-column>
      <el-table-column label="店铺描述" prop="shopDescription" show-overflow-tooltip></el-table-column>
      <el-table-column label="支付方式" prop="shopPayment" show-overflow-tooltip></el-table-column>
      <el-table-column label="店铺作者" prop="shopAuthor" show-overflow-tooltip></el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
        v-model:currentPage="queryForm.pageNum"
        v-model:page-size="queryForm.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'CanteenShopPage',
  data() {
    return {
      queryForm: {
        shopName: '',
        shopAt: '',
        shopFloor: '',
        shopAuthor: '',
        shopPayment: [],
        order: null,
        pageNum: 1,
        pageSize: 10
      },
      Payment: [],
      tableData: [],
      total: 0,
      loading: false
    };
  },
  methods: {
    // 查询数据
    async fetchData() {
      this.loading = true;
      this.queryForm.shopPayment = this.Payment.join(","); // 将数组转换为字符串
      try {
        const response = await axios.get('/canteenshop/page', {
          params: this.queryForm,
        });
        console.log(response.data);
        this.tableData = response.data.data.list || [];
        this.total = response.data.data.total || 0;
      } catch (error) {
        this.$message.error('查询失败：' + error.message);
      } finally {
        this.loading = false;
      }
    },

    // 分页事件处理
    handleSizeChange(newSize) {
      this.queryForm.pageSize = newSize;
      this.fetchData();
    },

    handleCurrentChange(newPage) {
      this.queryForm.pageNum = newPage;
      this.fetchData();
    },

    // 重置表单
    resetForm() {
      this.queryForm.shopName = '';
      this.queryForm.shopAt = '';
      this.queryForm.shopFloor = '';
      this.queryForm.shopAuthor = '';
      this.queryForm.shopPayment = [];
      this.queryForm.order = null;
      this.queryForm.pageNum = 1;
      this.queryForm.pageSize = 10;
      this.fetchData();
    },

    // 行点击事件
    handleRowClick(row) {
      this.$router.push({path: '/canteenShopDetail', query: {shopId: row.shopId}});
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

<style scoped>
.query-form {
  margin-bottom: 20px;
}
</style>